<template>
<!--     登录页面 -->
    <div id="Login">
      <div id="loginVessels">
        <h1>{{num}}</h1>
<!--        账号-->
        <div id="account">
          <h3>账号</h3>
          <el-input class="accountIpt" v-model="account" placeholder="请输入账号"></el-input>
        </div>
<!--        密码-->
        <div id="password">
          <h3>密码</h3>
          <el-input v-model="password" placeholder="请输入密码" show-password></el-input>
        </div>
<!--        忘记密码-->
        <a id="forgetPassword"  @click="forget">忘记密码</a>
<!--        登录-->
        <div id="loginBtn" @click="login">登录</div>
<!--        注册-->
        <div id="signBtn" @click="sign">注册</div>
      </div>
    </div>
</template>

<script>
import '../assets/login.css'
export default {
  name: 'Login',
  data () {
    return {
      num: '登录',
      account: '',
      password: ''
    }
  },
  mounted () {
  },
  methods: {
    login () {
      if (this.account === '') {
        this.$message('账号不能为空')
      } else if (this.account.length < 6 || this.account.length > 16) {
        this.$message('账号位数为6~16')
      } else if (this.password === '') {
        this.$message('密码不能为空')
      } else if (this.password.length < 6 || this.password.length > 16) {
        this.$message('密码位数为6~16')
      } else {
        this.$axios({
          method: 'post',
          url: '/Menu/User/login',
          params: {
            account: this.account,
            password: this.password
          }
        }).then(data => {
          if (data.data.code === 200) {
            this.$message({
              message: data.data.message,
              type: 'success'
            })
            this.$store.dispatch('token', data.data.object.token)
            setTimeout(() => {
              this.$router.push({
                name: 'Home'
              })
            }, 2000)
          } else {
            this.$message(data.data.message)
          }
        }).catch(error => {
          console.log(error)
        })
      }
    },
    sign () {
      this.$router.push({
        name: 'Sign'
      })
    },
    forget () {
      this.$router.push({
        name: 'Forget'
      })
    }
  }
}
</script>

<style lang="less" scoped>
  #Login{
    width: 100vw;
    height: 100vh;
    background-image: url("../assets/background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    #loginVessels{
      position: fixed;
      top: 80px;
      left: 150px;
      width:390px;
      background-color: #ffffff;
      border-radius: 10px;
      padding: 40px;
      h1{
        text-align: center;
        margin-bottom: 10px;
      }
      h3{
        font-weight: 500;
        margin-bottom: 10px;
      }
      #account{
        margin-bottom: 10px;
      }
      #email{
        margin-bottom: 10px;
      }
      #code{
        margin-bottom: 10px;
      }
      #forgetPassword{
        display: block;
        width: 100%;
        height: 30px;
        line-height: 30px;
        color: rgb(24,160,251);
        text-align: right;
        font-size: 14px;
        margin-bottom: 20px;
      }
      #btn{
        width: 100%;
        height: 40px;
        border-radius: 2px;
        text-align: center;
        line-height: 40px;
        color: #ffffff;
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
      }
      #loginBtn{
        #btn();
        background-color: rgb(255,149,18);
        margin-bottom: 20px;
        &:active{
          background-color: rgba(225, 149, 18, .7)
        }
      }
      #signBtn{
        #btn();
        background-color: rgb(191,191,191);
        &:active{
          background-color: rgba(191,191,191,.7);
        }
      }
    }
  }
</style>
